<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <script src="../../js/vue.js"></script>
    <script src="../../js/axios.js"></script>
</head>
<style>
    .success {
        color: springgreen;
    }

    .err {
        color: red;
    }
</style>

<body>
    <div id="app">
        <p>用&nbsp;户&nbsp;&nbsp;名：
            <input type="text" v-model="user"><span :class="userclass">{{userSpan}}</span>
        </p>
        <p>密&emsp;&emsp;码：
            <input type="text" v-model="pwd"><span :class="pwdclass">{{pwdSpan}}</span>
        </p>
        <p>确认密码：
            <input type="text" v-model="pwd1"><span :class="pwd1class">{{pwd1Span}}</span>
        </p>
        <p>电&emsp;&emsp;话：
            <input type="text" v-model="phone"><span :class="phoneclass">{{phoneSpan}}</span>
        </p>
        <p>
            <button @click="register">注册</button>
        </p>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            user: "",
            userSpan: "请输入6-12位字母数字或下划线且开头不为数字",
            userclass: "err",
            userreg: /^[a-zA-Z_]\w{5,11}$/,


            pwd: "",
            pwdSpan: "请输入6-12位字母数字或下划线",
            pwdclass: "err",
            pwdreg: /^\w{6,12}$/,


            pwd1: "",
            pwd1Span: "",
            pwd1class: "err",


            phone: "",
            phoneSpan: "请输入正确的电话格式",
            phoneclass: "err",
            phonereg: /^1[3-9]\d{9}$/,


            status: false,

            list: []
        },
        created() {
            axios({
                method: "get",
                url: "http://localhost:2345/usernameinfos",
            }).then((result) => {
                console.log(result);
            })
        },
        methods: {
            async register() { //点击注册时
                if (this.userclass == "success" && this.pwdclass == "success" && this.pwd1class == "success" && this.phoneclass == "success") {

                    await axios({
                        method: "post",
                        url: "http://localhost:2345/usernameinfos",
                        data: { //get请求的参数是parmas  post请求的参数是data
                            username: this.user,
                            userpwd: this.pwd,
                            userphone: this.phone
                        }
                    });

                    alert("注册成功！");
                    location.href = "login.html";

                } else {
                    alert("请注意红色的提示！");
                    return false;
                }
            },

            checkAttr(attr, tips) {

                if (this[attr + "reg"].test(this[attr])) {
                    this[attr + "Span"] = "√";
                    this[attr + "class"] = "success";
                    return true;
                } else {
                    this[attr + "Span"] = tips;
                    this[attr + "class"] = "err";
                    return false;
                }
            },
            pwdcheck() {
                if (this.checkAttr("pwd", "请输入6-12位字母数字或下划线")) {
                    var flag1 = /[A-Z]/.test(this.pwd);
                    var flag2 = /[a-z]/.test(this.pwd);
                    var flag3 = /[0-9]/.test(this.pwd);
                    var sum = flag1 + flag2 + flag3;
                    // console.log(this.pwd);
                    // console.log(flag1,flag2,flag3);
                    // console.log(sum);
                    switch (sum) {
                        case 1:
                            this.pwdSpan = "密码强度:弱";
                            break;
                        case 2:
                            this.pwdSpan = "密码强度:中";
                            break;
                        case 3:
                            this.pwdSpan = "密码强度:强";
                            break;
                    }

                    if (this.pwd1.length) { //有值的时候再判断
                        if (this.pwd == this.pwd1) {
                            this.pwd1Span = "√";
                            this.pwd1class = "success";

                        } else {
                            this.pwd1Span = "两次密码不一致";
                            this.pwd1class = "err";
                        }
                    }
                }
            }
        },
        watch: {
            async user() {
                this.checkAttr("user", "请输入6-12位字母数字或下划线且开头不为数字");

                let {data: list} = await axios({ //data是集合 查询返回的都是集合
                    method: "get", //查询一定要用get!!!
                    url: "http://localhost:2345/usernameinfos",
                    params: { //查询表里面有没有这个数据存在
                        username: this.user //将查询到的数据放到data数组中
                    }
                });
                // console.log(list);
                if (list.length) {
                    this.userSpan = "该用户名已存在！";
                    this.userclass = "err";
                }
            },
            pwd() {
                this.pwdcheck();
            },
            pwd1() {
                this.pwdcheck();
            },
            async phone() {
                this.checkAttr("phone", "请输入正确的电话格式");

                let {data: list} = await axios({ //data是集合 查询返回的都是集合
                    method: "get", //查询一定要用get!!!
                    url: "http://localhost:2345/usernameinfos",
                    params: { //查询表里面有没有这个数据存在
                        userphone: this.phone //将查询到的数据放到data数组中
                    }
                });
                // console.log(list);
                if (list.length) {
                    this.phoneSpan = "该手机号已被注册！";
                    this.phoneclass = "err";
                }
            }
        }

    })
</script>

</html>